<template>
  <div class="canvas-container">
    <canvas ref="canvasEl"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const canvasEl = ref(null);
let ctx = null;
let animationFrame = null;
const drones = [];

class Drone {
  constructor(canvas) {
    this.canvas = canvas;
    this.reset();
    this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
  }

  reset() {
    this.x = Math.random() * this.canvas.width;
    this.y = Math.random() * this.canvas.height;
    this.speed = 1 + Math.random() * 3;
    this.angle = Math.random() * Math.PI * 2;
    this.rotorSpeed = 0.05 + Math.random() * 0.1;
    this.size = 20 + Math.random() * 15;
  }

  update() {
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed;
    this.angle += (Math.random() - 0.5) * 0.1;

    if (this.x < -this.size) this.x = this.canvas.width + this.size;
    if (this.x > this.canvas.width + this.size) this.x = -this.size;
    if (this.y < -this.size) this.y = this.canvas.height + this.size;
    if (this.y > this.canvas.height + this.size) this.y = -this.size;
  }

  draw() {
    ctx.save();
    ctx.translate(this.x, this.y);
    
    // 机身
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.ellipse(0, 0, this.size / 2, this.size / 1.5, 0, 0, Math.PI * 2);
    ctx.fill();

    // 螺旋桨
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.rotate(Date.now() * this.rotorSpeed / 1000);
    for (let i = 0; i < 4; i++) {
      ctx.rotate(Math.PI / 2);
      ctx.beginPath();
      ctx.moveTo(this.size / 1.5, 0);
      ctx.lineTo(this.size / 1.2, 0);
      ctx.stroke();
    }

    ctx.restore();
  }
}

const resizeCanvas = () => {
  canvasEl.value.width = window.innerWidth;
  canvasEl.value.height = window.innerHeight;
};

const animate = () => {
  ctx.fillStyle = 'rgba(10, 10, 46, 0.1)';
  ctx.fillRect(0, 0, canvasEl.value.width, canvasEl.value.height);

  drones.forEach(drone => {
    drone.update();
    drone.draw();
  });

  animationFrame = requestAnimationFrame(animate);
};

const handleTouch = (e) => {
  drones.forEach(drone => {
    drone.angle = Math.atan2(
      e.touches[0].clientY - drone.y,
      e.touches[0].clientX - drone.x
    );
  });
};

onMounted(() => {
  ctx = canvasEl.value.getContext('2d');
  
  // 初始化画布
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
  
  // 创建无人机实例
  for (let i = 0; i < 5; i++) {
    drones.push(new Drone(canvasEl.value));
  }

  // 启动动画
  animate();

  // 添加触摸事件
  canvasEl.value.addEventListener('touchstart', handleTouch);
});

onUnmounted(() => {
  // 清理工作
  window.removeEventListener('resize', resizeCanvas);
  canvasEl.value.removeEventListener('touchstart', handleTouch);
  cancelAnimationFrame(animationFrame);
});
</script>

<style scoped>
.canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0a2e;
  touch-action: none;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
